<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="../css/goods/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="../css/goods/shouhou_add_address.css" />

	<!-- <link rel="stylesheet" type="text/css" href="../css/goods/confirm_order.css" /> -->
	<link rel="stylesheet" href="../css/mui.picker.min.css">
	<script type="text/javascript">
		(function () {
			var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
			clientWidth = clientWidth || localStorage.getItem("clientWidth")
			if (clientWidth > 750)
				clientWidth = 750;
			document.documentElement.style.fontSize = clientWidth * 1 / 16 + "px";
		})();
	</script>

</head>

<body>

	<header class="mui-bar mui-bar-nav" style="border-bottom: 1px solid #c5c5c5">
		<a class="mui-action-back mui-icon  mui-pull-left arr_left">
		</a>
		<h1 class="mui-title">评价</h1>
		<a class="mui-pull-right" onclick="app.sub_this()">提交</a>
	</header>
	<div class="mui-content sqwtfk">

		<div class="address_form">
			<div class="feedback_top">
				<img class="feedback_tx" :src="goods_info.goods_pic" />
				<div class="star_box">
					<div class="" style="margin-left: 6px;">
						<b @click="change_star(1)" :class="star>0?'mui-icon mui-icon-star-filled':'mui-icon mui-icon-star'"></b>
						<b @click="change_star(2)" :class="star>1?'mui-icon mui-icon-star-filled':'mui-icon mui-icon-star'"></b>
						<b @click="change_star(3)" :class="star>2?'mui-icon mui-icon-star-filled':'mui-icon mui-icon-star'"></b>
						<b @click="change_star(4)" :class="star>3?'mui-icon mui-icon-star-filled':'mui-icon mui-icon-star'"></b>
						<b @click="change_star(5)" :class="star>4?'mui-icon mui-icon-star-filled':'mui-icon mui-icon-star'"></b>
						<!--<i class="mui-icon mui-icon-star-filled"></i>
                    <i class="mui-icon mui-icon-star"></i>
                    <i class="mui-icon mui-icon-star"></i>
                    <i class="mui-icon mui-icon-star"></i>
                    <i class="mui-icon mui-icon-star"></i>-->
					</div>
				</div>
			</div>
			<div class="text_info">
				<textarea class="fs_28" v-model="text_area" name="" rows="" placeholder="这款眼镜戴着效果怎么样..." cols=""></textarea>
			</div>
			<div class="hr_20"></div>
			<div class="imgs fbwz">

				<div id="has_img">

					<div class="img_item" v-for="(i,k) in imgs">
						<div class="has_img">
							<img :src="i.pic" />
						</div>

						<i class="mui-icon mui-icon-closeempty" @click="del_this(k)"></i>
					</div>

				</div>
				<div class="img_item add_img" @click="open_pic" v-show="add_img_flag">
					<i class="iconfont icon-paizhao"></i>
					<div class="fs_20">最多三张</div>
				</div>
			</div>

		</div>
		<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
			<!-- 可选择菜单 -->
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" id="paizhao">
					<a href="#">拍照</a>
				</li>
				<li class="mui-table-view-cell" id="xiangce">
					<a href="#">相册</a>
				</li>
			</ul>
			<!-- 取消菜单 -->
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#sheet1">
						<b>取消</b>
					</a>
				</li>
			</ul>
		</div>
	</div>

	<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/tools/util.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/tools/upload_img.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var app = new Vue({
			el: ".mui-content",
			data: {
				imgs: [],
				add_img_flag: true,
				text_area: '',
				star: 0,
				imgs_str: '',
				user: '',
				goods_info: ""

			},
			methods: {
				open_pic: function () {
					mui('#sheet1').popover('toggle');
				},
				del_this: function (k) {
					this.imgs.splice(k, k + 1);
					if (this.imgs.length >= 3) { //控制上传图片数量
						this.add_img_flag = true;
					} else {
						this.add_img_flag = true;
					}
				},
				sub_this: function () {
					//提交本页面
					if (!this.star) {
						mui.toast('请先选择星级')
						return
					}

					/* 
					 * url:https://zhapp.4hl.cn/api/comment/commentdata
					 * method:POST
					 * uid   用户id
					 * ogid  订单id
					 * content  评论内容
					 * goodsid  商品id
					 * pics   图片集  图片之间用英文逗号（','）隔开
					 * sum_grade  总体评分
					 * stype	区别小程序和APP  1-->APP  0-->小程序
					 * 
					 * */

					util.log("uid-->" + this.user.uid);

//					util.log('ogid-->' + this.goods_info.order_id)
					util.log('content-->'+ this.text_area)
					util.log('goodsid-->'+ this.goods_info.goods_id)
					util.log('sum_grade-->'+ this.star)
					util.log("imgs_str-->"+this.imgs_str)
				 
					$.ajax({
						type: "post",
						url: "https://zhapp.4hl.cn/api/comment/commentdata",
						async: true,
						data: {
							uid: this.user.uid,
							ogid: this.goods_info.goods[0].ogid,
							content: this.text_area,
							goodsid: this.goods_info.goods_id,
							orderid: this.goods_info.order_id,
							pics: this.imgs_str,
							sum_grade: this.star,
							stype: 1, //区别小程序和APP

						},
						success: function (res) {
							
							
							res = JSON.parse(res);
							console.log(res);
							if (res.code == 1) {
								mui.toast("评价成功");
								plus.webview.currentWebview().close()
							} else {
								mui.toast("您已评价过");
							}
							console.log(JSON.stringify(res))
						},
						error: function (err) {
							console.log(err)
							console.log(JSON.stringify(err))
						}
					});
				},
				change_star: function (i) {
					this.star = i;
				}
			},
			created: function () {
				this.user = JSON.parse(localStorage.getItem("user"));
				var goods_info = JSON.parse(localStorage.getItem("pingjia_goods_info"));
				console.log(goods_info)
				// 处理订单数据接口差异
				// 如果订单信息中有商品图片则直接使用,否则使用订单信息中的商品信息的商品图
				if (goods_info.pic) {
					goods_info.goods_pic = goods_info.pic
				} else if (goods_info.goods) {
					goods_info.goods_pic = goods_info.goods[0].pic
				}
				// 如果订单信息有 订单ID 则 直接使用,否则使用订单中商品信息里的 ogid
				if (goods_info.orderid) {
					goods_info.order_id = goods_info.orderid
				} else if (goods_info.goods) {
					goods_info.order_id = goods_info.goods[0].ogid
				}
				// 如果订单信息有 商品ID 则 直接使用,否则使用订单中商品信息里的  商品ID
				if (goods_info.goodsid) {
					goods_info.goods_id = goods_info.goodsid
				} else if (goods_info.goods) {
					goods_info.goods_id = goods_info.goods[0].goodsid
				}

				this.goods_info = goods_info;
			},
			mounted: function () {
				var that = this;

				ts.select_img('xiangce', function (path) {
					mui.toast(path)
					mui('#sheet1').popover('hide');
					that.imgs_str += path + "_-_"
					that.imgs.push({
						pic: path
					});
					if (that.imgs.length >= 3) { //控制上传图片数量
						that.add_img_flag = false;
					}
				});
				ts.get_img('paizhao', function (path) {
					mui.toast(path)
					mui('#sheet1').popover('hide');
					that.imgs_str += path + "_-_"
					that.imgs.push({
						pic: path
					});
					if (that.imgs.length >= 3) { //控制上传图片数量
						that.add_img_flag = false;
					}
				});

			}
		})
	</script>
</body>

</html>
